<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例事件</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>实例事件</h1>
<hr>
<div id="app">
    {{num}}
    <p><button @click="add">增加</button></p>
</div>
<p><button onclick="reduce()">reduce</button></p>
<p><button onclick="reduceOnce()">reduceOnce</button></p>
<p><button onclick="off()">off</button></p>
<script type="text/javascript">
    var app = new Vue({
      el:'#app',
      data:{
        num:1
      },
      methods:{
        add(){
          this.num++;
        }
      }
    })
    //监控事件，会一直执行
    app.$on('reduce',function  () {
      this.num--;
    })
    //监控事件，只执行一次
    app.$once('reduceOnce',function  () {
      this.num--;
    })

    function reduce () {
      //外部实例调用内部实例使用$emit方法
      app.$emit('reduce')
    }
    function reduceOnce () {
      app.$emit('reduceOnce')
    }
    function off () {
      //关闭监控事件使用$off
      app.$off('reduce')
    }
</script>
</body>
</html>